<template>
  <div class="box">
    <!-- 1、优秀新电台 -->
    <div class="new">
      <div class="u-title">优秀新电台</div>
      <ul class="djilist">
        <li
          v-for="(item,index) in newdjsinfo.slice(0,5)"
          :key="index"
        >
          <a
            href="#"
            @click.prevent="goDJradio(item.id)"
          ><img v-lazy="item.picUrl"></a>
          <p
            class="p1"
            @click.prevent="goDJradio(item.id)"
          >{{item.name}}</p>
          <p class="p2">{{item.rcmdtext}}</p>
        </li>
      </ul>
    </div>
    <!-- ------------------------------- -->
    <!-- 2、电台排行榜 -->
    <div class="allradios">
      <div class="u-title">电台排行榜</div>
      <ul>
        <li
          v-for="(item,index) in alldjsinfo"
          :key="index"
        >
          <a
            href="#"
            class="left"
            @click.prevent="goDJradio(item.id)"
          >
            <img v-lazy="item.picUrl">
          </a>
          <div class="right">
            <h3 @click.prevent="goDJradio(item.id)">{{item.name}}</h3>
            <p class="p1">
              <i class="iconfont icon-renwu"></i>
              <span @click="gouserhome(item.dj.userId)">{{item.dj.nickname}}</span>
            </p>
            <p class="p2">共{{item.programCount}}期&nbsp;&nbsp;订阅{{item.subCount}}次</p>
          </div>
        </li>
      </ul>
    </div>
    <!-- ------------------------------- -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="allcount"
      :page-size="22"
      prev-text="上一页"
      next-text="下一页"
      :current-page="nowpage"
      @current-change="changepage"
    >
    </el-pagination>
  </div>

</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      djcartID: -1,
      newdjsinfo: [],
      alldjsinfo: [],
      allcount: 0,
      // 当前页数
      nowpage: 1,
    }
  },
  created () {
    this.getnewDJ()
    this.getallDJ()
  },
  watch: {
    $route (to, from) {
      // console.log(to.params.id, from.params.id)
      this.djcartID = to.query.id
      this.getnewDJ()
      this.getallDJ()
    }
  },

  methods: {
    async getnewDJ () {
      this.djcartID = this.$route.query.id;
      // console.log('新id：', this.djcartID)
      let res = await axios.get('https://autumnfish.cn//dj/recommend/type?type=' + this.djcartID);
      // console.log(res)
      this.newdjsinfo = res.data.djRadios
    },
    async getallDJ () {
      let offst = (this.nowpage - 1) * 22
      let res = await axios.get('https://autumnfish.cn//dj/radio/hot?cateId=' + this.djcartID + '&limit=22&offset=' + offst);
      // console.log(res)
      this.alldjsinfo = res.data.djRadios
      this.allcount = res.data.count
    },
    // 改变页数
    changepage (val) {
      this.nowpage = val;
      // console.log(this.nowpage)
      this.getallDJ()
    },
    goDJradio (id) {
      this.$router.push({ path: '/djradio', query: { id: id } })
    },
    gouserhome (id) {
      this.$router.push({ path: '/user', query: { id: id } })
    }
  }
}
</script>

<style lang="less" scoped>
a {
  text-decoration: none;
}
ul,
li,
p {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
.u-title {
  border-bottom: 2px solid #c20c0c;
  height: 33px;
  font-size: 20px;
  line-height: 28px;
}
.new {
  margin-top: 10px;
  .djilist {
    margin: 16px 0 0 -37px;
    display: flex;
    justify-content: left;
    align-items: center;
    li {
      width: 150px;
      margin-left: 37px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: left;
      a {
        display: block;
        width: 150px;
        height: 150px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .p1 {
        margin: 13px 0 6px;
        line-height: 16px;
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        cursor: pointer;
      }
      .p1:hover {
        text-decoration: underline;
      }
      .p2 {
        height: 36px;
        line-height: 18px;
        color: #999;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        font-size: 12px;
      }
    }
  }
}
.allradios {
  margin-top: 35px;
  ul {
    margin-left: -30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    align-items: center;
    li {
      width: 435px;
      height: 120px;
      margin-left: 30px;
      padding: 20px 0;
      border-bottom: 1px solid #e7e7e7;
      display: flex;
      justify-content: left;
      align-items: center;
      .left {
        display: block;
        width: 120px;
        height: 120px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .right {
        margin-left: 20px;
        h3 {
          width: 100%;
          height: 64px;
          margin: 0;
          line-height: 64px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          cursor: pointer;
        }
        h3:hover {
          text-decoration: underline;
        }
        .p1 {
          margin-bottom: 6px;
          line-height: 20px;
          font-size: 12px;
          .iconfont {
            margin-right: 4px;
            color: #666;
          }
          span {
            color: #333;
            cursor: pointer;
          }
          span:hover {
            text-decoration: underline;
          }
        }
        .p2 {
          color: #999;
          font-size: 12px;
        }
      }
    }
  }
}
.el-pagination {
  margin-left: 250px;
  margin-top: 50px;
}
</style>
